<template>
	<view class="ys">
		<view class="sharbox">
			<view class="codeimg">
				<image :src="this.url" mode="widthFix"></image>
				<uqrcode ref="uqrcode" canvas-id="qrcode" :size="150" :hide="true" :value="link" @longtap="save">
				</uqrcode>
			</view>
			<view class="title">
				我的邀请码 {{code}}
			</view>
			<view class="down" @click="saveImg">
				点击保存图片
			</view>
			<view class="canvasbox" :style="{'width':canvasWidth+'px','height':canvasHeight+'px'}">
				<image v-if="saveimg_url!=''" :src="saveimg_url" mode=""></image>
				<canvas canvas-id="mycanvas" id="mycanvas"
					:style="{'width':canvasWidth+'px','height':canvasHeight+'px'}"></canvas>
				<!-- <button @click="saveImg">保存图片</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		UserInfo
	} from "@/api/api.js"
	export default {
		data() {
			return {
				code: '',
				link: '',
				url: '',
				saveimg_url: '',
				canvasWidth: 0,
				canvasHeight: 0,
				show_canvas: false,
				style: ''
			}
		},
		onReady() {
			var that = this
			if (this.$refs.uqrcode) {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						that.url = res.tempFilePath
						that.onCanvas()
					}
				});
			}
		},
		onLoad() {
			let info = uni.getWindowInfo()
			this.canvasWidth = info.windowWidth
			this.canvasHeight = info.windowHeight
			this.style = {
				widht: this.canvasWidth + 'px',
				hegith: this.canvasHeight + 'px'
			}
			// this.UserIndex()
			this.code = '5566'
			this.link = this.$config.websiteUrl + `pages/register/index?invite=${this.code}`
		},
		methods: {
			onCanvas() {
				var _this = this
				let url = _this.url
				uni.showLoading({
					title: '海报生成中'
				})
				const ctx = uni.createCanvasContext('mycanvas', _this);
				// 设置 canvas 背景色
				ctx.setFillStyle('#FFFFFF');
				// #ifdef H5
				ctx.fillRect(0, 0, _this.canvasWidth, _this.canvasHeight + 44);
				// #endif
				// #ifndef H5
				ctx.fillRect(0, 0, _this.canvasWidth, _this.canvasHeight);
				// #endif
				ctx.setFillStyle('#fff');
				// 背景图片
				ctx.drawImage('/static/index/code.png', 0, 0, _this.canvasWidth, _this.canvasHeight);
				ctx.setFontSize(16);
				ctx.setTextAlign('center');
				ctx.fillText('我的邀请码 :', _this.canvasWidth / 2 - 30, _this.canvasHeight * .4 + _this.canvasWidth * .4 + 50);
				ctx.fillText(_this.code, _this.canvasWidth / 2 + 44, _this.canvasHeight * .4 + _this.canvasWidth * .4 +
					50);
				// 左边标题
				ctx.setTextAlign('left')
				ctx.setFontSize(16)
				// _this.writeTextOnCanvas(ctx, 30, 21, '我的邀请码111', 50, 350);
				// 设置虚线
				ctx.setStrokeStyle('#333333');
				ctx.setLineDash([5, 10], 2);
				ctx.beginPath();
				ctx.moveTo(220, 340);
				ctx.lineTo(220, 420);
				ctx.stroke();
				// 二维码
				ctx.drawImage(_this.url, _this.canvasWidth / 2 - _this.canvasWidth * .22, _this.canvasHeight * .4, _this
					.canvasWidth * .44, _this.canvasWidth * .44);
				ctx.draw();
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						width: _this.canvasWidth,
						height: _this.canvasHeight,
						destWidth: _this.canvasWidth * 2,
						destHeight: _this.canvasHeight * 2,
						success: function(res) {
							_this.saveimg_url = res.tempFilePath

						},
						fail: function() {
							uni.showToast({
								title: '绘制失败'
							});
						},
						complete: function() {
							uni.hideToast();
						}
					});
					uni.hideLoading()
				}, 1000)
				// 延迟后渲染至canvas上
				// let pic = await _this.setTime(ctx)
				// _this.$emit('success', pic);
				// _this.qr_code = '';
			},
			UserIndex() {
				UserInfo().then(res => {
					if (res.code == 0) {
						let user = res.data.user
						this.code = '5566'
						this.link = this.$config.websiteUrl + `pages/register/index?invite=${this.code}`
					}
				})
			},
			saveImg() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否保存图片?',
					success(res) {
						if (res.confirm) {

						}
					}
				})

			},
			copy(data) {
				uni.setClipboardData({
					data
				})
			}
		}
	}
</script>

<style lang="scss">
	.ys {
		min-height: calc(100vh - 44px);
		/* #ifdef MP-WEIXIN */
		min-height: 100vh;
		/* #endif */
		height: 100%;
		// background: url('/static/image/codebg.jpg');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#mycanvas {
		visibility: hidden;
	}

	.canvasbox {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		left: 50%;
		transform: translate(-50%);
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}

		button {
			position: fixed;
			bottom: 50px;
			left: 50%;
			transform: translate(-50%);
			font-size: 14px;
			width: 70%;
		}
	}

	.sharbox {
		width: 280px;
		padding: 40px 0 24px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-size: 16px;

		.title {
			display: flex;
			font-size: 15px;
			align-items: center;
			margin-top: 30px;

			.icon {
				margin-left: 5px;
			}

			image {
				width: 15px;
				height: 15px;
				margin-left: 5px;
			}
		}

		.code {
			margin-top: 10px;
			font-weight: bold;
		}

		.down {
			margin: 15px 0;
		}

		.codeimg {
			width: 160px;
			height: 160px;
			margin-top: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;

			image {
				width: 150px;
			}
		}

		.link {
			margin-top: 10px;
			width: 80%;
			word-break: break-all;
			font-size: 13px;
		}

	}
</style>